<!--  Reference Data - User Management Form -->
<!-- Modal Client -->
    <div class="modal fade" id="clientModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">Add Client</h4>
            </div>
            <div class="modal-body">
                <form role="form">
                    <div class="form-group">
                        <label for="exampleInputEmail1">First Name</label>
                        <input type="text" class="form-control" id="exampleInputEmail1" data-bind=" value : clientAddEditData().firstName" placeholder="First Name">
                    </div>
                    <div class="form-group">
                        <label for="exampleInputPassword1">Last Name</label>
                        <input type="text" class="form-control" id="exampleInputPassword1" data-bind=" value : clientAddEditData().lastName" placeholder="Last Name">
                    </div>
                    <div class="form-group">
                        <label for="exampleInputPassword1">Profession</label>
                        <input type="text" class="form-control" id="exampleInputPassword1" data-bind=" value : clientAddEditData().profession" placeholder="Profession">
                    </div>
                    <div class="form-group">
                        <label for="exampleInputPassword1">Contact No.</label>
                        <input type="text" class="form-control" id="exampleInputPassword1" data-bind=" value : clientAddEditData().contactNum" placeholder="Contact No.">
                    </div>
                </form>
            </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary"  data-dismiss="modal" data-bind=" click : function(){ $root.saveClient() }">Save changes</button>
          </div>
        </div>
      </div>
    </div>

    <!-- Modal Manager -->
    <div class="modal fade" id="managerModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h4 class="modal-title" id="myModalLabel">Add Manager</h4>
          </div>
          <div class="modal-body">
                <form role="form">
                    <div class="form-group">
                        <label for="exampleInputEmail1">First Name</label>
                        <input type="text" class="form-control" id="exampleInputEmail1" data-bind=" value : managerAddEditData().firstName" placeholder="First Name">
                    </div>
                    <div class="form-group">
                        <label for="exampleInputPassword1">Last Name</label>
                        <input type="text" class="form-control" id="exampleInputPassword1" data-bind=" value : managerAddEditData().lastName" placeholder="Last Name">
                    </div>
                    <div class="form-group">
                        <label for="exampleInputPassword1">Profession</label>
                        <input type="text" class="form-control" id="exampleInputPassword1" data-bind=" value : managerAddEditData().profession" placeholder="Profession">
                    </div>
                    <div class="form-group">
                        <label for="exampleInputPassword1">Contact No.</label>
                        <input type="text" class="form-control" id="exampleInputPassword1" data-bind=" value : managerAddEditData().contactNum" placeholder="Contact No.">
                    </div>
                </form>
            </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary"  data-dismiss="modal" data-bind=" click : function(){ $root.saveManager() }">Save changes</button>
          </div>
        </div>
      </div>
    </div>

	<!-- Modal User -->
    <div class="modal fade" id="userModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h4 class="modal-title" id="myModalLabel">Add User</h4>
          </div>
          <div class="modal-body">
            <form role="form">
                <div class="form-group">
                    <label for="userId">User ID</label>
                    <input type="texy" class="form-control" id="userId" placeholder="User ID" data-bind=" value : userAddEditData().userId">
                </div>
                <div class="form-group">
                    <label for="password">Password</label>
                    <input type="password" class="form-control" id="password" placeholder="Password" data-bind=" value : userAddEditData().password">
                </div>
                
                <div class="form-group">
                    <label for="firstName">First Name</label>
                    <input type="text" class="form-control" id="firstName" placeholder="First Name" data-bind=" value : userAddEditData().firstName">
                </div>
                <div class="form-group">	
		            <label for="lastName">Last Name</label>
                    <input type="text" class="form-control" id="lastName" placeholder="Last Name" data-bind=" value : userAddEditData().lastName">
                </div>
                <div class="form-group">
                    <label for="emailId">Email Id</label>
                    <input type="email" class="form-control" id="emailId" placeholder="Email" data-bind=" value : userAddEditData().email">
                </div>
                <div class="form-group">
                    <label for="isActive">Is Active</label>
                    <select class="form-control" id="isActive" placeholder="Y/N" data-bind=" value : userAddEditData().isActive" >
                    <option value="Y">Yes</option>
                    <option value="N">No</option>
                    </select>
                </div> 
				<div class="form-group">
                    <label for="userGroupId">Group ID</label>
                    <select class="form-control" id="userGroupId" placeholder="Group ID" data-bind=" value : userAddEditData().groupId" >
                          <!-- ko foreach : groupList -->
                    		
                    		<option   data-bind="text : groupName , value : groupId ,
                    							attr : {'selected' : ko.toJS(userAddEditData().groupId)==ko.toJS(groupId)}" ></option>
                    		
                    	<!-- /ko -->
                    </select>
                </div>
            </form>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary" id="userSave" data-dismiss="modal" data-bind=" click : function(){ $root.saveUser() }">Save changes</button>
          </div>
        </div>
      </div>
    </div>


	  <!-- Modal Group -->
    <div class="modal fade" id="groupModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h4 class="modal-title" id="myModalLabel">Add Group</h4>
          </div>
          <div class="modal-body">
            <form role="form">
                <div class="form-group">
                    <label for="groupId">Group ID</label>
                    <input type="text" class="form-control" id="groupId" data-bind="value : groupAddEditData().groupId " placeholder="Group ID">
                </div> 
                <div class="form-group">
                    <label for="groupName">Name</label>
                    <input type="text" class="form-control" id="groupName" data-bind="value : groupAddEditData().groupName " placeholder="Name">
                </div><div class="form-group">
                    <label for="parentGroupId">Parent Group Id</label>
                    <input type="text" class="form-control" id="parentGroupId" data-bind="value : groupAddEditData().parentGroupId " placeholder="Parent Group Id">
                </div>
            </form>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary" id="groupSave" data-dismiss="modal" data-bind="click : function(){ $root.saveGroup();}">Save changes</button>
          </div>
        </div>
      </div>
    </div>

  <!-- Modal User-Group -->
    <div class="modal fade" id="userGroupModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h4 class="modal-title" id="myModalLabel">Add User Group</h4>
          </div>
          <div class="modal-body">
            <form role="form">
                <div class="form-group">
                    <label for="UserId">User</label>
                    <select  class="form-control" id="ugUserId" 
                    data-bind="value : userGroupAddEditData().userId, event: { change:function(){$root.getUserGroup();}}">
                    			<option value='0'>Select</option>
                    			<!-- ko foreach : userList -->
                    				<option data-bind="value : userId, text : ko.toJS(firstName)+' ' +ko.toJS(lastName)"></option>
                    			<!-- /ko -->
                    </select>
                    
                </div> 
                <div class="form-group">
                    <label >Currently Assigned to </label>
                    <select  class="form-control">
                    			<!-- ko foreach : userGroupList -->
                    				<option data-bind="value : groupId, text : groupId"></option>
                    			<!-- /ko -->
                    </select>
                    
                </div> 
                <div class="form-group">
                    <label for="groupId">Select Groups (hold ctrl to select multiple)</label>
                    <select multiple size=5 class="form-control" id="ugGroupId" >
                    	
                    			<!-- ko foreach : unmappedGroupList -->
                    				<option data-bind="value : groupId, text : groupName"></option>
                    			<!-- /ko -->
                    </select>
                </div> 
               
            </form>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary" id="groupSave" data-dismiss="modal" data-bind="click : function(){ $root.saveUserGroup();}">Save changes</button>
          </div>
        </div>
      </div>
    </div>

    <!-- Modal Resource -->
    <div class="modal fade" id="resourcesModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h4 class="modal-title" id="myModalLabel">Add Resource</h4>
          </div>
            <div class="modal-body">
                <form role="form">
                    <div class="form-group">
                       <div class="fund-section">
                        <h4>Resource Name</h4>
                      	<input type="text" class="form-control" id="resourceId" placeholder="Resource Name" data-bind=" value : resourceAddEditData().resourceId" >
                    </div>
                    </div>
                     <div class="form-group">
                       <div class="fund-section">
                        <h4>File Name</h4>
                      	<input type="text" class="form-control" id="fileName" placeholder="File Name" data-bind=" value : resourceAddEditData().fileName" >
                    </div>
                    </div>
                    <div class="form-group">
                      <div class="fund-section">
                        <h4>Type</h4>
                        <select id='resourceType' class="form-control select1" data-bind=" value : resourceAddEditData().resourceType" >
                            <option>Report</option>
                            <option>Page</option>
                            
                        </select>
                      </div>
                    </div>
                     
                    <div class="form-group">
                       <div class="fund-section">
                        <h4> Group Id</h4>
						
						 <select class="form-control" id="resourceGroupId"  data-bind=" value : resourceAddEditData().groupId" >
	                          <!-- ko foreach : groupList -->
	                    		
	                    		<option   data-bind="text : groupName , value : groupId ,
	                    							attr : {'selected' : ko.toJS(resourceAddEditData().groupId)==ko.toJS(groupId)}" ></option>
	                    		
	                    	<!-- /ko -->
                    	</select>
						
                      </div>
                      <div id="result"></div>
                    </div>
                </form>
            </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary" id="resourceSave" data-dismiss="modal" data-bind=" click : function(){ $root.saveResource() }">Save changes</button>
          </div>
        </div>
      </div>
    </div>
	<!-- Modal Map Funds -->
    <div class="modal fade" id="fundsModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h4 class="modal-title" id="myModalLabel">Map Funds</h4>
          </div>
            <div class="modal-body">
                <form role="form">
                    
                    <div class="form-group">
                      <div class="fund-section">
                        <h4>Client</h4>
                        <select class="form-control select1" >
                            <option>ABC</option>
                            <option>DEF</option>
                            <option>DEMO</option>
                        </select>
                      </div>
                    </div>
                    <div class="form-group">
                       <div class="fund-section">
                        <h4>Manager</h4>
                        <select class="form-control select1">
                            
                            <option>ABC</option>
                            <option>DEF</option>
                            <option>DEMO</option>
                            <option>SARVA</option>
                        </select>
                      </div>
                    </div>
                    <div class="form-group">
                       <div class="fund-section">
                        <h4> Funds</h4>
                        <select class="form-control select1">
                           
                            <option>ABC LS Fund</option>
                            <option>ABC EM Fund</option>
                            <option>ABC Arb Fund</option>
                            <option>DEF World Marco Fund</option>
                            <option>DEMO LS Fund</option>
                            <option>DEMO Stat Arb Fund</option>
                        </select>
                      </div>
                      <button type="button" class="btn btn-red" id="select-values">Map</button>
                      <div id="result"></div>
                    </div>
                </form>
            </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Save changes</button>
          </div>
        </div>
      </div>
    </div>
    <!-- Modal Trade Map Funds -->
    <div class="modal fade" id="tradefundModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h4 class="modal-title" id="myModalLabel">Trade Map Funds</h4>
          </div>
            <div class="modal-body">
                <form role="form">
                    
                    <div class="form-group">
                      <div class="fund-section">
                        <h4>Trade File</h4>
                        <select class="form-control select3">
                          
                            <option value="1">ABC</option>
                            <option value="2">DEF</option>
                            <option value="3">DEMO</option>
                        </select>
                      </div>
                    </div>
                    <div class="form-group">
                       <div class="fund-section">
                        <h4>Data Point</h4>
                        <select class="form-control select3">
                            
                            <option value="1">ABC</option>
                            <option value="2">DEF</option>
                            <option value="3">DEMO</option>
                            <option value="4">SARVA</option>
                        </select>
                      </div>
                    </div>
                    <div class="form-group">
                       <div class="fund-section">
                        <h4>Inbound Mapping</h4>
                        <select class="form-control select3">
                            
                            <option value="1">ABC</option>
                            <option value="2">DEF</option>
                            <option value="3">DEMO</option>
                            <option value="4">SARVA</option>
                        </select>
                      </div>
                    </div>
                    <div class="form-group">
                       <div class="fund-section">
                        <h4>Outbound Mapping</h4>
                        <select class="form-control select3">
                            <option>Funds</option>
                            <option>ABC LS Fund</option>
                            <option>ABC EM Fund</option>
                            <option>ABC Arb Fund</option>
                            <option>DEF World Marco Fund</option>
                            <option>DEMO LS Fund</option>
                            <option>DEMO Stat Arb Fund</option>
                        </select>
                      </div>
                      <button type="button" class="btn btn-red" id="select-values1">Map</button>
                       <div id="result1"></div>
                    </div>
                </form>
            </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Save changes</button>
          </div>
        </div>
      </div>
    </div>